// Copyright (C) 2021-2022 Intel Corporation
// Copyright (C) 2024 CVAT.ai Corporation
//
// SPDX-License-Identifier: MIT

import React from 'react';
import { Row, Col } from 'antd/lib/grid';
import Collapse from 'antd/lib/collapse';
import Text from 'antd/lib/typography/Text';
import Icon from '@ant-design/icons';
import { ArrowIcon } from 'icons';
import { Tag } from 'antd';
import useAnnotationDetail from './useAnnotationDetail';

interface Props {
    readonly: boolean;
    clientID: number;
}

function AnnotationDetail(props: Props): JSX.Element {
    const { clientID } = props;
    const { objectState, collapsed, collapse } = useAnnotationDetail(clientID);

    return (
        <Row className='px-3 pt-3'>
            <Collapse
                className='cvat-objects-sidebar-state-item-collapse'
                activeKey={collapsed ? [] : ['details']}
                onChange={collapse}
                expandIconPosition='end'
                collapsible='icon'
                expandIcon={({ isActive }) => (
                    <Icon component={ArrowIcon} className={isActive ? 'rotate-0' : 'rotate-180'} />
                )}
                items={[
                    {
                        key: 'details',
                        label: (
                            <div>
                                <Tag color={objectState?.color}>{clientID}</Tag>
                                <Text className='text-base'>{objectState?.label?.name}</Text>
                            </div>
                        ),
                        children: (
                            <div className='!bg-[#F7F8FA] p-3 mt-3 rounded space-y-3'>
                                {objectState?.label.attributes.map(
                                    (attribute: any): JSX.Element => (
                                        <Row
                                            key={attribute.id}
                                            align='middle'
                                            justify='start'
                                            className='cvat-object-item-attribute-wrapper '
                                            gutter={[16, 0]}
                                        >
                                            <Col span={24}>
                                                <Text className='text-[#86909C]'>{attribute.name}：</Text>
                                                {objectState.attributes[attribute.id]}
                                            </Col>
                                        </Row>
                                    ),
                                )}
                            </div>
                        ),
                    },
                ]}
            />
        </Row>
    );
}

export default React.memo(AnnotationDetail);
